<template>
  <BasicModal
    @ok="handleOK"
    title="申请提现"
    width="700px"
    v-bind="$attrs"
    destroyOnClose
    @register="register"
  >
    <a-form :model="formState">
      <a-form-item
        label="请选择收款信息"
        :labelCol="{ span: 24 }"
        :rules="[{ required: true, message: '请选择收款信息' }]"
      >
        <a-select
          :fieldNames="{ label: 'name', value: 'id' }"
          :options="paymentList"
          placeholder="请选择提现收款信息"
          v-model:value="formState.id"
          @change="handleChange"
        />
      </a-form-item>
      <a-form-item label="收款姓名">
        <a-input v-model:value="paymentInfo.name" />
      </a-form-item>
      <a-form-item label="收款账号">
        <a-input v-model:value="paymentInfo.card" />
      </a-form-item>
      <a-form-item label="银行名称" v-if="paymentInfo.type == 2">
        <a-input v-model:value="paymentInfo.bank" />
      </a-form-item>
      <a-form-item
        :labelCol="{ span: 24 }"
        :rules="[{ required: true, message: '请输入提现金额' }]"
        placeholder="请输入提现金额(最低1000)(最高100000)"
      >
        <template #label>
          <div style="display: flex; justify-content: space-between; width: 100%">
            <div>请输入提现金额</div>
            <div style="margin-left: 400px"
              >账户可用余额：<span style="color: red">{{ getUserInfo.balance.balance }}</span></div
            >
          </div>
        </template>
        <a-input v-model:value="formState.amount" />
      </a-form-item>
      <a-form-item label="备注信息" :labelCol="{ span: 24 }">
        <a-textarea v-model:value="formState.remark" :rows="4" placeholder="请输入备注信息" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { onMounted, ref, watch } from 'vue';
  import { GetPaymentListApi, GetBankListApi, WithdrawalAppApi } from '@/api/finance';
  import { message } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';

  const paymentList = ref([]);
  const paymentInfo = ref({
    name: '',
    card: '',
    bank: '',
    bankId: 0,
  });
  const formState = ref({
    id: null,
    amount: 0,
    remark: '',
  });
  const BankList = ref([]);
  const [register, { closeModal }] = useModalInner((data) => {
    console.log(data);
  });

  const { getUserInfo } = useUserStore();

  function handleChange(val, option) {
    console.log(val, option);
    paymentInfo.value = option;
  }

  function handleOK() {
    WithdrawalAppApi(formState.value).then(() => {
      message.success('申请提现成功');
      closeModal();
    });
  }

  watch(
    () => paymentInfo.value.bankId,
    (newVal) => {
      paymentInfo.value.bank = BankList.value[newVal];
    },
  );

  onMounted(() => {
    GetBankListApi().then((res) => {
      console.log(res);
      BankList.value = res.list;
    });
    GetPaymentListApi({}).then((res) => {
      console.log(res);
      paymentList.value = res.list;
    });
  });
</script>
